<template>
	<view>
		<div class="upload-click-area" @click="upload" id="uploadArea">
			<i class='iconfont el-icon-extend-jia2'></i>
		</div>
		<image :src="imageUrl"></image>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				imageUrl: ''
			}
		},
		methods: {
			upload () {
				document.getElementById('uploadArea').className = 'upload-click-area selected' // 点击状态
				let url = this.$url + '/image'
				let fileType = 'image'
				let key = 'files'
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths
						uni.uploadFile({
							url: url,
							filePath: tempFilePaths[0],
							fileType: fileType,
							name: key,
							success: (uploadFileRes) => {
								let res = JSON.parse(uploadFileRes.data)
								if (res.code && res.code === '200') {
									this.imageUrl = url + '/' + res.data[0]
								}
							}
						})
					}
				})
			}
		}
	}
</script>

<style scoped>
.upload-click-area{
	width: 280rpx;
	height: 280rpx;
	border: 1px dashed #CCCCCC;
	display: flex;
	justify-content: center;
	align-items: center;
}
.selected{
	border: 1px dashed #007AFF;
}
.upload-click-area i{
	display: block;
	font-size: 60rpx;
	color: #CCCCCC;
}
</style>
